<template>
  <common-page title="查看报告">
    <el-button slot="header" @click="goBack">返回</el-button>
    <div slot="content" class="execution-history-overview-wrap">
      <div class="split-line-12"></div>
      <div class="e-h-o-w-container">
        <div class="inside-report">
          <div class="grid-column-4">
            <icon-kpi-multiple :config="kpi_1"></icon-kpi-multiple>
            <icon-kpi-multiple :config="kpi_2"></icon-kpi-multiple>
            <icon-kpi :config="kpi_3"></icon-kpi>
            <icon-kpi :config="kpi_4"></icon-kpi>
          </div>
          <div class="column-divided"></div>
          <div class="grid-column-2 three">
            <div class="chart-container grid-1f">
              <title-chart
                type="sankey"
                title="重要数据分类"
                :dataset="importDataOtion"
              ></title-chart>
            </div>

            <div>
              <div class="chart-container">
                <title-chart
                  type="chart-word-cloud"
                  title="识别规则分布"
                  :dataset="ruleDataOption"
                ></title-chart>
              </div>
              <div class="column-divided"></div>
              <div class="chart-container">
                <title-chart
                  type="funnel"
                  title="敏感表等级"
                  :dataset="sensitiveDataOption"
                ></title-chart>
              </div>
            </div>
          </div>
          <div class="column-divided"></div>
          <div class="grid-column-3">
            <div class="chart-container">
              <title-chart
                type="chart-bar"
                title="已扫描表重要数据TOP10"
                :dataset="importDataTopOption"
              ></title-chart>
            </div>
            <div class="chart-container">
              <title-chart
                type="chart-bar"
                title="已扫描表核心数据TOP10"
                :dataset="coreDataTopOption"
              ></title-chart>
            </div>
          </div>
        </div>
      </div>
    </div>
  </common-page>
</template>

<script>
import IconKpi from "@/components/IconKpi";
import IconKpiMultiple from "@/components/IconKpiMultiple";
import TitleChart from "@/components/EChart/TitleChart";
import {
  queryTaskHistoryCount,
  queryTaskHistoryCount1,
} from "@/api/datascan/executionhistory/history";
import { querySensitiveAllWordsList } from "@/api/datascan/scanresults/column";
import { handleTree } from "@/utils/ruoyi";

const Number = ["一", "二", "三", "四", "五", "六"];

export default {
  name: "overview",
  props: {
    reportData: {
      type: Object,
      default: {
        taskId: null,
        historyId: null,
      },
    },
  },
  data() {
    return {
      kpi_1: {
        icon: "iconfont icon-zonglan",
        color: "#72c140",
        label: ["字段总数", "敏感字段总数"],
        value: [0, 0],
      },
      kpi_2: {
        icon: "iconfont icon-zonglan",
        color: "#e13c39",
        label: ["表总数", "敏感表总数"],
        value: [0, 0],
      },
      kpi_3: {
        icon: "iconfont icon-zonglan",
        color: "#448ef7",
        label: "重要数据",
        value: "0",
      },
      kpi_4: {
        icon: "iconfont icon-zonglan",
        color: "#efb041",
        label: "核心数据",
        value: "0",
      },
      importDataOtion: {
        source: [],
        linksData: [],
        titleData: [],
      },
      ruleDataOption: {
        dimensions: [],
        source: [],
      },
      sensitiveDataOption: {
        source: [],
      },
      importDataTopOption: {
        dimensions: ["tableName", "count"],
        source: [],
        option: {
          color: ["#39a5e1"],
          yAxis: {
            name: "单位： 次",
            nameGap: 30,
          },
        },
      },
      coreDataTopOption: {
        dimensions: ["tableName", "count"],
        source: [],
        option: {
          color: ["#feb566"],
          yAxis: {
            name: "单位： 次",
            nameGap: 30,
          },
        },
      },
    };
  },
  components: {
    IconKpi,
    TitleChart,
    IconKpiMultiple,
  },
  methods: {
    getData() {
      queryTaskHistoryCount(this.reportData).then((res) => {
        if (res && res.code === 200) {
          this.kpi_1.value = [
            res.data.columnCount,
            res.data.sensitiveColumnCount,
          ];
          this.kpi_2.value = [
            res.data.tableCount,
            res.data.sensitiveTableCount,
          ];
          this.kpi_3.value = res.data.importantCount;
          this.kpi_4.value = res.data.coreCount;
          // 重要数据分类
          if (res.data.importantDataType && res.data.importantDataType.length) {
            let importDataList = res.data.importantDataType;
            let treeData = handleTree(
              importDataList,
              "type_id",
              "parent_type_id"
            );

            this.changeData(treeData, 0);

            let field = ["type_name", "namecount"];

            let { nodesData, linesData, titleData } = this.setLinesData(
              treeData,
              field
            );

            if (titleData.length) {
              titleData.forEach((item, index) => {
                item.left = `${
                  index * (100 / titleData.length - 1) + 5 * (index + 1)
                }%`;
              });
            }

            this.importDataOtion.source = nodesData;
            this.importDataOtion.linksData = linesData;
            this.importDataOtion.titleData = titleData;
          }

          //识别规则分布

          if (res.data.discerRules && res.data.discerRules.length) {
            this.ruleDataOption.source = res.data.discerRules.reduce((r, c) => {
              r.push({
                name: c.name,
                value: c.count,
              });
              return r;
            }, []);
          }

          // 敏感表等级
          if (
            res.data.sensitiveTableLevel &&
            res.data.sensitiveTableLevel.length
          ) {
            let sensitiveData = res.data.sensitiveTableLevel;
            this.sensitiveDataOption.source = sensitiveData.reduce((r, c) => {
              r.push({
                name: c.LEVEL_NAME,
                value: c.count,
              });
              return r;
            }, []);
          }

          if (res.data.tableCoreTop && res.data.tableCoreTop.length) {
            this.coreDataTopOption.source = res.data.tableCoreTop;
          }
          if (res.data.tableImpTop && res.data.tableImpTop.length) {
            this.importDataTopOption.source = res.data.tableImpTop;
          }
        }
      });
    },

    //树结构数据处理
    changeData(treeData, level) {
      let nums = 0;
      treeData.forEach((item) => {
        item.level = level + 1;

        if (item.children && item.children.length) {
          this.changeData(item.children, level + 1);
        }
        item.number = item.children?.length || 1; // 子节点数量
        // 计算当前节点所有子元素集合的最大长度
        item.total = item.children
          ? item.children.reduce((r, c) => {
              r += c.total ? c.total : c.number;
              return r;
            }, 0)
          : 0;

        nums += item.total > item.number ? item.total : item.number;
      });
    },
    //将树结构数据处理成图表所需数据
    setLinesData(treeData, field, lines, nodes, title) {
      let info = {
        linesData: lines || [],
        nodesData: nodes || [],
        titleData: title || [],
      };
      treeData.forEach((item, index) => {
        let obj = {
          name:
            item[field[0]] +
            `(${Number[item.level - 1]}级)` +
            (item[field[1]] ? `（${item[field[1]]}）` : ""),
          depth: item.level - 1,
        };
        // 第一层节点无子节点时，设置默认value为1
        if (item.level === 1 && (!item.children || !item.children.length)) {
          obj.value = 1;
        }
        info.nodesData.push(obj);
        // 设置标题
        if (
          !info.titleData.find(
            (f) => f.text === `${Number[item.level - 1]}级数据分类`
          )
        ) {
          info.titleData.push({
            text: `${Number[item.level - 1]}级数据分类`,

            textStyle: {
              fontSize: 18,
            },
            top: "top",
          });
        }
        // 设置连线数据
        if (item.children && item.children.length) {
          item.children.forEach((child) => {
            info.linesData.push({
              source:
                item[field[0]] +
                `(${Number[item.level - 1]}级)` +
                (item[field[1]] ? `（${item[field[1]]}）` : ""),
              target:
                child[field[0]] +
                `(${Number[item.level]}级)` +
                (child[field[1]] ? `（${child[field[1]]}）` : ""),
              value: child.total ? child.total : child.number,
            });
          });
          info = this.setLinesData(
            item.children,
            field,
            info.linesData,
            info.nodesData,
            info.titleData
          );
        }
      });

      return info;
    },

    goBack() {
      this.$emit("close");
    },
  },
  mounted() {
    this.getData();

    // this.getCount()
  },
};
</script>

<style scoped lang="scss">
.execution-history-overview-wrap {
  width: 100%;
  height: 100%;
  background-color: #eee;
  box-sizing: border-box;

  .e-h-o-w-container {
    height: calc(100% - 12px);
    overflow-y: scroll;
  }

  .chart-container {
    height: 400px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
  }

  .grid-column-4 {
    display: grid;
    grid-column-gap: 12px;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr 1fr 25%;
  }

  .grid-column-2 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 3fr 25%;
  }
  .grid-column-3 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 50%;
  }

  // .three {
  //   grid-column-gap: 12px;

  //   grid-template-columns: 1fr 1fr;
  // }

  .grid-column-1 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr;
  }

  .column-divided {
    height: 12px;
    width: 100%;
  }

  .grid-1f {
    height: 100%;
  }
}
</style>
